import "../../assets/css/app/index.css"
import "./_index.scss"

import { createSubpageComponent } from "../page.component";
import tinycolor from "tinycolor2";
import debounce from "andy-ui/src/utils/debounce";

let template = `
    <div class="aui-colorpicker">
        <div ref="col1" :style="childDom.col1.style" class="aui-colorpicker__col1"></div>
        <div ref="col2" class="aui-colorpicker__col2" @mousedown="onChangeColor">
            <div :style="childDom.col2__sel.style" class="aui-colorpicker__sel"></div>
        </div>
        <div ref="hue" class="aui-colorpicker__hue" @mousedown="onChangeHue">
            <div :style="childDom.hue__sel.style" class="aui-colorpicker__sel"></div>
        </div>
        <div ref="col_preview" :style="childDom.col_preview.style" class="aui-colorpicker__colpreview"></div>
        <input ref="output" class="aui-colorpicker__output" :value="childDom.output.value" @change="onOutputChange">
    </div>
`;

Vue.component("ui-example-colorpicker", {
    template: template,
    props: {
        value: {
            type: String,
            default: "#ffffff"
        }
    },
    data() {
        var ret = {};    
        ret.tc = tinycolor("#ffffff");
        ret.color = ret.tc.toHsl();
        ret.cp_width = 180;
        ret.col_w = 180;
        ret.col_h = 180;
        ret.col_x = 0;
        ret.col_y = 0;

        ret.huerefermouseup = false;
        ret.col2refermouseup = false;

        ret.childDom = {};
        ret.childDom.col1 = {
            style: {
                backgroundColor: ""                
            }
        };        
        ret.childDom.col2 = {
            style: {
            }
        };                
        ret.childDom.col2__sel = {
            mouseenabled: false,
            style: {
                transform: ""
            }
        };
        ret.childDom.hue = {
            mouseenabled: false,
            style: {
                transform: ""
            }
        };        
        ret.childDom.hue__sel = {
            mouseenabled: false,
            style: {
                transform: ""
            }
        };
        ret.childDom.col_preview = {            
            style: {
                backgroundColor: ""
            }
        }
        ret.childDom.output = {
            style: {},
            value: ""
        };    
        return ret;     
    },
    mounted() {
        var self = this;
        self.tc = tinycolor(self.value);
        self.color = self.tc.toHsl();
        var offset = self.getOffset(self.tc.toHsv());

        self.debounceHandler = debounce(self.onUpdateOutput, 1000)
        self.updateColorPosition(offset.x, offset.y)
        self.updateHue(self.color.h)
        self.updateOutput()        
    },
    methods: {
        onChangeHue(e) {
            var self = this;
            self.updateHue(e.offsetX/180 * 360)

            // 颜色栏拖动
            if (self.$refs.hue && self.$refs.hue.onmousemove === null ){
                self.$refs.hue.onmousemove = function (e){
                    if(e.target === self.$refs.hue){
                        self.updateHue(e.offsetX/180 * 360)
                        e.stopPropagation()
                    }
                }
            }          

            // 点击外部时消除内部移动方法
            if (!self.huerefermouseup){
                self.huerefermouseup = true;
                document.addEventListener("mouseup", self.huerefermouseupHandler.bind(self))
            }            
        },
        huerefermouseupHandler(e) {
            var self = this;
            self.huerefermouseup = false;
            self.$refs.hue.onmousemove = null
            document.removeEventListener("mouseup", self.huerefermouseupHandler.bind(self))
        },
        onChangeColor(e) {
            var self = this;
            self.updateColorPosition(e.offsetX, e.offsetY);

            if (self.$refs.col2 && self.$refs.col2.onmousemove === null ){
                self.$refs.col2.onmousemove = function (e){
                    if(e.target === self.$refs.col2){
                        self.updateColorPosition(e.offsetX, e.offsetY);
                        e.stopPropagation()
                    }
                }
            }

            // 点击外部时消除内部移动方法
            if (!self.col2refermouseup){
                self.col2refermouseup = true;
                document.addEventListener("mouseup", self.col2refermouseupHandler.bind(self))
            }             
        },
        col2refermouseupHandler(e) {
            var self = this;
            self.col2refermouseup = false;
            if (self.$refs.col2) {
                self.$refs.col2.onmousemove = null
            }
            document.removeEventListener("mouseup", self.col2refermouseupHandler.bind(self))
        },
        onUpdateOutput (e) {
            var self = this;
            if (self.$refs.output && tinycolor(self.$refs.output.value).isValid()){
                var tc = tinycolor(self.$refs.output.value)
                self.color = tc.toHsl()
                var hsv = tc.toHsv()

                var x = Math.round((hsv.s) * (self.col_w - 1))
                var y = Math.round((1 - hsv.v) * (self.col_h))
                self.updateColorPosition(x, y)
                self.updateColor()
            } else {
                // reset last color
                self.$refs.output.value = '#' + tinycolor(self.color).toHex();
            }
        },
        onOutputChange(e) {
            var self = this;
            self.debounceHandler(e);
        },
        getOffset(hsv) {
            var self = this;
            var x = Math.round((hsv.s) * (self.col_w - 1))
            var y = Math.round((1 - hsv.v) * (self.col_h))
            return {
                x: x,
                y: y
            }
        },
        updateHue(a) {
            var self = this
            self.color.h = a
            self.updateColor()
        },
        updateOutput () {
            var self = this;
            self.childDom.output.value = '#' + tinycolor(self.color).toHex()
        },
        updateColor() {
            var self = this;
            var c = tinycolor(self.color)
            c = c.toHslString()
            self.childDom.col_preview.style.backgroundColor = c
            self.childDom.hue__sel.style.transform = `translate(${self.color.h/360*self.cp_width}px, 4px)`
            self.childDom.col1.style.backgroundColor = `hsl(${self.color.h},100%,50%)`  
            self.updateOutput()
        },        
        updateColorPosition(x, y) {
            var self = this;
            self.childDom.col2__sel.style.transform = `translate(${x}px, ${y}px)`;
            var s = x/(self.col_w - 1);
            var b = 1 - y/(self.col_h - 1);
            
            var c = tinycolor({
              h: self.color.h,
              s: (s * 100),
              v: (b * 100)
            })
            
            self.color = c.toHsl()
            self.updateColor()
        }        
    }
});

export default createSubpageComponent(
    `<ui-example-colorpicker></ui-example-colorpicker>`
);